<template>
  <!-- 方案规划导航栏 -->
  <div style="background: #202B61;    width: 96%;height: 82%;text-align: left;position: absolute;margin: 18px;overflow-y: auto;">
    <!-- 顶部tab切换 -->
    <div style="margin-left: 1vh;margin-right: 1vh;top: 1%; width: 99%;background: rgb(46, 60, 133);height: 8vh;float: left;position: absolute;">

      <div id="div1" @click="buttonClick('planProgram', 'div1')" style="background:#409EFF" class="buttonStyle">气象</div>
      <div id="div2" @click="buttonClick('load2', 'div2')" class="buttonStyle">负荷</div>
      <div id="div3" @click="buttonClick('plan2', 'div3')" class="buttonStyle">方案选型</div>
      <div id="div4" @click="buttonClick('resource', 'div4')" class="buttonStyle">资源</div>
      <div id="div5" @click="buttonClick('paramSet', 'div5')" class="buttonStyle">参数设定</div>
      <div id="div6" @click="buttonClick('planResult', 'div6')" class="buttonStyle">规划结果</div>
      <div id="div7" @click="buttonClick('pageTwo','div7')" class="buttonStyle">利用率分析</div>


      <div style="display: inline-block;float: right;">
        <el-button type="primary" @click="youhua()" style=" margin-top: 10px;margin-right: 5vh">优化</el-button>
      </div>
    </div>

    <div style="margin-left: 1vh;margin-right: 1vh;top: 13%; width: 99%;height: auto;float: left;position: absolute;">
      <!--路由页面-->
      <router-view :key="activeDate"></router-view>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'planProgram',
    data() {
      return {
        windowDatate: '',
        activeDate: '',
        projectId: ''
      }
    },
    mounted: function() {

      var projectId = this.$root.project_id;
      this.projectId = projectId;

      this.activeDate = new Date().getTime();
      this.$router.push({path: '/planProgram'})
    },
    methods: {
      buttonClick : function(type,divId){
        for(var i = 1;i<=7;i++){
          $("#div"+i).css("background","#202B61");
        }
        $("#"+divId).css("background","#409EFF");
        this.activeDate = new Date().getTime();
        //路由跳转
        this.$router.push('/'+type)
      },
      youhua(){
        this.$http.post('/iepsapi/planProgram/planYH', {
          "project_id": this.projectId
        }).then((res) => {
          if (res.data.flag) {
            this.$message({
              type: 'success',
              message: res.data.message
            });
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    }
  }
</script>

<style scoped>
  .buttonStyle {
    height: 5vh;
    width: 15vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor:pointer;
    border-radius: 10px;
    font-family: Arial;
    border:none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #202B61;
    margin: 1.5vh 10px;
    text-align:center;
    line-height:5vh;
    vertical-align: middle;
    text-decoration: none;
  }
</style>
